<!-- 编辑弹窗 -->
<template>
    <ele-modal
      width="520px"
      :visible="visible"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      :title="isUpdate ? '修改账户' : '添加账户'"
      @update:visible="updateVisible"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="92px">
        <el-row :gutter="24">
          <el-col :md="24" :sm="24">
            <el-form-item label="账户:" prop="account">
               <el-input v-model="form.account"  placeholder="请输入账户" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :md="24" :sm="24" >
            <el-form-item label="真实姓名:" prop="name">
              <el-input  v-model="form.name" placeholder="请输入真实姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :md="24" :sm="24" >
            <el-form-item label="手机号码:" >
              <el-input  v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :md="24" :sm="24" >
            <el-form-item label="默认密码:" >
              <el-input  v-model="form.defaultPW" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :md="24" :sm="24">
            <el-form-item label="角色:">
              <el-checkbox-group v-model="form.roles" >
                <el-checkbox  v-for=" item in roleList" :key="item.id" :label="item.id" >{{item.name}}</el-checkbox>
              </el-checkbox-group>  
            </el-form-item>
          </el-col>
      
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="updateVisible(false)">取消</el-button>
        <el-button type="primary" :loading="loading" @click="save" v-if="this.btnindex!='3'">
          保存
        </el-button>
      </div>
    </ele-modal>
  </template>
  
  <script>
    import { AddAccount,UpdateAccount,GetModelById } from '@/api/usermanager/accountmanager';
    import { GetAllRoles} from '@/api/usermanager/rolemanager';
    export default {
      name: 'RoleEdit',
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        //按钮索引
        btnindex:String,
      },
      data() {
        return {
          // 表单数据
          form: {defaultPW:111111},
          // 表单验证规则
          rules: {
            account: [{ required: true, message: '请输入账户',trigger: 'blur'}],
            name: [{required: true,message: '请输入真实姓名',trigger: 'blur'}],
          },
          // 提交状态
          loading: false,
          // 是否是修改
          isUpdate: false,
          roleList: [],
        };
      },
  
      //初始化数据
      created(){
        this.queryRoles();
      },
      methods: {
  
        /* 保存编辑 */
        save() {
          //校验必填信息
          this.$refs['form'].validate((valid) => {
            if (!valid) {return false;}
            this.loading = true;
            const saveOrUpdate = this.isUpdate ? UpdateAccount : AddAccount;
            saveOrUpdate(this.form)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.updateVisible(false);
                //回调父组件方法
                this.$emit('done');
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          });
        },
        /* 更新visible */
        updateVisible(value) {
          //更新父组件中的visible的值
          this.$emit('update:visible', value);
        },
        
        queryRoles() {
          GetAllRoles().then((data)=>{
            this.roleList = [];
            data.map((d)=>{
              this.roleList.push({id:d.id,name:d.name});
            });
          });
        },
          //赋值到页面
        setRole(id){
          GetModelById(id)
              .then((res) => {
                this.form = res;
                this.form.defaultPW = 111111;
          });
        },
      },
      /* 监听visible属性变化 */
      watch: {
        visible(visible) {
          if (visible) {
            if (this.data && this.data.id) {
              //赋值this.form
              this.form = {roles:[]};
              this.setRole(this.data.id);
              this.isUpdate = this.isUpdate = this.data.id !=null && this.data.id !=undefined;
            } else {
              this.form={roles:[]};
              this.isUpdate = false;
              this.form.defaultPW = 111111;
            }
          } else {
            //移除校验结果并重置字段
            // this.$refs['form'].resetFields();
            //移除校验结果
            this.$refs['form'].clearValidate();
            this.form = {roles:[]};
          }
        }
      }
    };
  </script>
  